<template>
	<div class="BackstageDiscount">
		<div class="head">
			发布优惠
			<div class="box"></div>
			<button class="btn1" @click="$router.push('/backstage')">BACK</button>
			<div class="clear"></div>
		</div>
		<div class="body">
			<Form ref="form" :model="form" label-position="top" :rules="ruleInline">
				<FormItem label="选择菜品：" prop="model">
					<Select v-model="form.model" style="width:100%">
						<Option v-for="(item,key) in List" :value="key" :key="key">{{ item.commodity_name}}
						</Option>
					</Select>
				</FormItem>
				<FormItem label="折扣力度：" prop="value">
					<Input v-model="form.value" type="number"></Input>
				</FormItem>
				<FormItem label="优惠信息：" prop="info">
					<Input v-model="form.info" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
				</FormItem>
				<Button type="primary" class="btn2" @click="handleSubmit('form')">提交</Button>
			</Form>
		</div>
	</div>
</template>

<script>
	export default {
		name: "BackstageDiscount",
		data() {
			return {
				ruleInline: {
					model: [
						{ required: true, message: '此为必填项' }
					],
					value: [
						{ required: true, message: '此为必填项' }
					],
					info: [
						{ required: true, message: '此为必填项' }
					],
				},
				form: {
					model:'',
					commodity_id: '',
					commodity_name:'',
					value: '',
					info: '',
					shop_id:this.$store.state.id.id,
				},
				List: [],
			}
		},
		methods:{
			handleSubmit(name) {
				this.$refs[name].validate(async (valid) => {
					if (valid) {
						let d1 = this.List[this.form.model]
						this.form.commodity_id = d1.id
						this.form.commodity_name = d1.commodity_name
						console.log(this.form)
						// let d2 = await this.$axios.post('Shop/Index/grouppurchase', this.form).then(r => r.data)
						// if (d2) {
						// 	this.$Message.success('发布优惠成功');
						// 	return this.$router.push('/backstage');
						// }
					} else {
						this.$Message.error('请完整填写数据!');
					}
				})
			},
		},

		async mounted(){
			let Li = await this.$axios.post('root/RootSee/shopxq',this.$store.state.id).then(r=>r.data)
			this.List = Li.commodity
		}
	}
</script>

<style lang="less">

	.BackstageDiscount {
		max-width: 700px;
		margin: auto;

		.head {
			height: 35px;
			color: aliceblue;
			width: 100%;
			background: #de393e;
			font-size: 22px;
			text-align: center;
			padding-right: 84px;
			line-height: 35px;
		}
		.bot{
			margin-bottom: 5px;
		}
		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			margin-left: 15px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid aliceblue;
		}
		.clear {
			clear: both;
		}
		.btn1 {
			background: aliceblue;
			line-height: 22px;
			font-size: 16px;
			margin-top: 7px;
			margin-left: -1px;
			color: #de393e;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
		.body {
			padding: 50px;
		}
		.sel {
			margin-bottom: 40px;
		}
		.btn2{
			float: right;
		}
	}
</style>




